<template>
  <view class="container">
    <!-- 表单组件 -->
    <view class="form-wrapper">
      <view class="page-title">开票信息</view>
      <u-form :model="form" ref="uForm" label-width="180rpx">
        <u-form-item label="发票类型" prop="status">
          <view class="radioGroup">
            <view class="mRadio" @click="radioChange(0)" :class="{'checked': form.status === 0}">
              <view class="mRadioIco"></view>
              <text class="mRadioTx">增值税专用发票</text>
            </view>
            <view class="mRadio" @click="radioChange(1)" :class="{'checked': form.status === 1}">
              <view class="mRadioIco"></view>
              <text class="mRadioTx">增值税普通发票</text>
            </view>
          </view>
          
        </u-form-item>
        
        <u-form-item label="公司全称" prop="name">
          <u-input v-model="form.name" placeholder="填写需要开具发票的企业名称" />
        </u-form-item>
        <u-form-item label="纳税识别号" prop="identify_number">
          <u-input v-model="form.identify_number" placeholder="请输入纳税识别号" />
        </u-form-item>
        <u-form-item label="联系电话" prop="phone" v-if="form.status==1">
          <u-input v-model="form.phone" placeholder="填写联系电话" />
        </u-form-item>
        <block v-if="form.status==0">
          <u-form-item label="地区" prop="region">
            <select-region v-model="form.region" />
          </u-form-item>
          <u-form-item label="详细地址" prop="detail">
            <u-input v-model="form.detail" placeholder="街道门牌、楼层等信息" />
          </u-form-item>
          <u-form-item label="联系电话" prop="phone">
            <u-input v-model="form.phone" placeholder="填写企业电话" />
          </u-form-item>
          <u-form-item label="银行账号" prop="bank_account">
            <u-input v-model="form.bank_account" placeholder="填写银行账号" />
          </u-form-item>
          <u-form-item label="开户行信息" prop="bank_message" :border-bottom="false">
            <u-input v-model="form.bank_message" placeholder="请输入开户行信息" />
          </u-form-item>
        </block>
        
        <u-form-item label="电子邮箱" prop="email">
          <u-input v-model="form.email" placeholder="填写电子邮箱" />
        </u-form-item>
        
      </u-form>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-del" :class="{ disabled }" @click="handleRemove()">删除开票信息</view>
        <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
  import SelectRegion from '@/components/select-region/select-region'
  import { isMobile } from '@/utils/verify'
  import * as Api from '@/api/invoice'

  // 表单字段元素
  const form = {
    status: 0,
    name: '',
    identify_number: '',
    phone: '',
    email: '',
    region: [],
    detail: '',
    bank_account: '',
    bank_message: '',
    // default: '',
  }
  
  // 表单验证规则
  const rules = {
    name: [{
      required: true,
      message: '请输入公司全称',
      trigger: ['blur', 'change']
    }],
    identify_number: [{
      required: true,
      message: '请输入纳税识别号',
      trigger: ['blur', 'change']
    }],
    region: [{
      required: true,
      message: '请选择省市区',
      trigger: ['blur', 'change'],
      type: 'array'
    }],
    detail: [{
      required: true,
      message: '请输入详细地址',
      trigger: ['blur', 'change']
    }],
    phone: [{
      required: true,
      message: '请输入联系电话',
      trigger: ['blur', 'change']
    }],
    email: [{
      required: true,
      message: '请输入电子邮箱',
      trigger: ['blur', 'change']
    }],
    bank_account: [{
      required: true,
      message: '请输入银行账号',
      trigger: ['blur', 'change']
    }],
    bank_message: [{
      required: true,
      message: '请输入开户行信息',
      trigger: ['blur', 'change']
    }]
  }
  const rules2 = {
    name: [{
      required: true,
      message: '请输入公司全称',
      trigger: ['blur', 'change']
    }],
    identify_number: [{
      required: true,
      message: '请输入纳税识别号',
      trigger: ['blur', 'change']
    }],
    phone: [{
      required: true,
      message: '请输入联系电话',
      trigger: ['blur', 'change']
    }],
    email: [{
      required: true,
      message: '请输入电子邮箱',
      trigger: ['blur', 'change']
    }],
  }

  export default {
    components: {
      SelectRegion
    },
    data() {
      return {
        form,
        rules,
        // 加载中
        isLoading: true,
        // 按钮禁用
        disabled: false,
        // 当前收货地址ID
        id: null
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad({ id }) {
      // 当前收货地址ID
      this.id = id
      // 获取当前记录详情
      this.getDetail()
    },

    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      // this.$refs.uForm.setRules(this.rules)
    },

    methods: {

      // 获取当前记录详情
      getDetail() {
        const app = this
        Api.detail(app.id)
          .then(result => {
            const detail = result.data.detail
            app.createFormData(detail)
            if (detail.status === 0) {
              this.$refs.uForm.setRules(this.rules)
            } else {
              this.$refs.uForm.setRules(this.rules2)
            }
          })
      },

      // 生成默认的表单数据
      createFormData(detail) {
        const { form } = this
        
        form.status = detail.status
        form.name = detail.name
        form.identify_number = detail.identify_number
        form.phone = detail.phone
        form.region = this.createRegion(detail)
        form.detail = detail.detail
        form.bank_account = detail.bank_account
        form.bank_message = detail.bank_message
        form.email = detail.email
      },

      createRegion(detail) {
        return [{
          label: detail.region.province,
          value: detail.province_id
        }, {
          label: detail.region.city,
          value: detail.city_id
        }, {
          label: detail.region.region,
          value: detail.region_id
        }]
      },
      radioChange(val) {
        this.form.status = val
        if (val === 0) {
          this.$refs.uForm.setRules(this.rules)
        } else {
          this.$refs.uForm.setRules(this.rules2)
        }
      },
      /**
       * 确认删除
       */
      onRemove(id) {
        const app = this
        Api.remove(id)
          .then(result => {
            app.$toast(result.message)
            uni.navigateBack()
          })
      },
      handleRemove() {
        const app = this
        if(!app.id) {
          return
        }
        uni.showModal({
          title: "提示",
          content: "您确定要删除当前发票信息吗?",
          success({ confirm }) {
            confirm && app.onRemove(app.id)
          }
        });
      },
      // 表单提交
      handleSubmit() {
        const app = this
        if (app.disabled) {
          return false
        }
        app.$refs.uForm.validate(valid => {
          if (valid) {
            app.disabled = true
            Api.edit(app.id, app.form)
              .then(result => {
                app.$toast(result.message)
                uni.navigateBack()
              })
              .finally(() => app.disabled = false)
          }
        })
      }

    }
  }
</script>

<style>
  page {
    background: #f7f8fa;
  }
</style>
<style lang="scss" scoped>
::v-deep .u-form-item--left {
    width: 90px !important;
    flex: 0 0 90px !important;
  }
  ::v-deep .u-form-item__message {
    padding-left: 90px !important;
  }
  .page-title {
    font-size: 26rpx;
    font-weight: 400;
    line-height: 36rpx;
    color: #666262;
    padding: 28rpx 0;
  }

  .form-wrapper {
    margin: 0 auto 0 auto;
    padding: 0 40rpx;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  /* 底部操作栏 */

  .footer {
    margin-top: 60rpx;
    padding-bottom: 80rpx;

    .btn-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      color: #fff;
      border-radius: 50rpx;
      
      & + .btn-item {
        margin-left: 40rpx;
      }
    }
    .btn-item-del {
      background-color: #aaa;
    }
    .btn-item-main {
      background: linear-gradient(to right, #f9211c, #ff6335);

      // 禁用按钮
      &.disabled {
        background: #ff9779;
      }
    }

  }
  
  
  .radioGroup {
    display: flex;
    flex-wrap: wrap;
    
    .mRadio {
      display: flex;
      align-items: center;
      & + .mRadio {
        margin-left: 20rpx;
      }
      &.checked {
        .mRadioIco {
          border: 0px;
          background: url('/static/assets/radio_checked.png') no-repeat;
          background-size: contain;
        }
      }
      .mRadioIco {
        display: inline-block;
        width: 34rpx;
        height: 34rpx;
        border: 1px solid #ddd;
        border-radius: 50%;
        margin-right: 0rpx;
      }
      .mRadioTx {
        font-size: 24rpx;
        margin-left: 10rpx;
        color: #333;
      }
    }
  }
  .defaultRow {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 30rpx 0;
    border-top: 1px solid #eee;
    .controls {
      display: flex;
      flex: 1;
      padding-left: 30rpx;
      // justify-content: flex-end;
    }
  }
</style>
